<template>
  <div id="modify-module">
    <div class="bg-color-w">
      <p class="form-title">模块基本信息</p>
      <el-form :model="DataCache" :label-position="'right'" label-width="160px" ref="modulePostForm" :rules="modulePostRules">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="模块编号:" prop="moduleCode">
              <el-input v-model="DataCache.moduleCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="模块名称:" prop="moduleName">
              <el-input v-model="DataCache.moduleName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="模块描述信息:">
              <el-input v-model="DataCache.moduleDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="所属网关环境:" prop="gwEnvId">
              <el-select v-model="DataCache.gwEnvId" placeholder="请选择所属网关环境" popper-class="zIndex-popper">
                <el-option
                  v-for="item in getwayEnvOpts"
                  :key="item.gwEnvId"
                  :label="item.gwEnvName"
                  :value="item.gwEnvId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="所属服务环境版本号:" prop="moduleVersion">
              <el-input v-model="DataCache.moduleVersion"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="服务地址:" prop="serverAddress">
              <el-input v-model="DataCache.serverAddress" placeholder="请输入服务地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :push="2" :span="10">
          <el-col :push="2" :span="10">
            <el-form-item label="服务类型:" prop="serverType">
              <el-select v-model="DataCache.serverType" placeholder="请选择服务类型" popper-class="zIndex-popper">
                <el-option
                  v-for="item in upDataoptionsServerType"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button class="pd-w30" type="primary" size="mini" @click="resetFormData">重置</el-button>
          <el-button class="pd-w30" type="primary" size="mini" @click="addInterfaceSubmit()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import ajax from '../../../../../api/ajax/ajax'
  import api from '../../../../../api/url'
  export default {
    name: 'set-err-msg',
    props: {
      Data: {},
      messages: {},
      opts: {},
      getwayEnvOpts: {}
    },
    watch: {
      Data () {
        this.DataCache = {
          moduleCode: this.Data.moduleCode,
          moduleName: this.Data.moduleName,
          moduleDesc: this.Data.moduleDesc,
          gwEnvId: this.Data.gwEnvId,
          moduleVersion: this.Data.moduleVersion,
          serverAddress: this.Data.serverAddress,
          serverType: this.Data.serverType
        }
        this.$nextTick(() => {
          this.$refs['modulePostForm'].clearValidate()
        })
      }
    },
      data () {
        return {
          upDataoptionsServerType: [
            {
              id: '00',
              value: 'doubbo服务'
            },
            {
              id: '01',
              value: 'HTTP'
            }
          ],
          DataCache: {
            moduleCode: this.Data.moduleCode,
            moduleName: this.Data.moduleName,
            moduleDesc: this.Data.moduleDesc,
            gwEnvId: this.Data.gwEnvId,
            moduleVersion: this.Data.moduleVersion,
            serverAddress: this.Data.serverAddress,
            serverType: this.Data.serverType
          },
            modulePostRules: {
                moduleCode: [
                    {required: true, trigger: 'blur', message: '模块编号不能为空'}
                ],
                moduleName: [
                    {required: true, trigger: 'blur', message: '模块名称不能为空'}
                ],
                moduleVersion: [
                    {required: true, trigger: 'blur', message: '模块版本不能为空'}
                ],
                gwEnvId: [
                    {required: true, trigger: 'change', message: '所属网关环境不能为空'}
                ],
                serverAddress: [
                  {required: true, trigger: 'blur', message: '服务地址不能为空'}
                ],
                serverType: [
                  {required: true, trigger: 'blur', message: '服务类型不能为空'}
                ]
            }
        }
      },
    methods: {
      addInterfaceSubmit () {
        this.$refs['modulePostForm'].validate((valid) => {
                  if (valid) {
                      if (!this.DataCache.moduleDesc) {
                          this.DataCache.moduleDesc = ''
                      }
                    // var that = this
                    Object.keys(this.DataCache).forEach(key => {
                      this.Data[key] = this.DataCache[key]
                    })
                      ajax.post(api.MODIFYAPIMODULE, this.Data, true).then(res => {
                          if (res === 'success') {
                              this.$message({
                                  message: '修改服务模块成功',
                                  type: 'success'
                              })
                          }
                      }).catch(res => {
                          this.$message({
                              showClose: true,
                              message: res.errorMsg,
                              type: 'warning'
                          })
                      })
                  } else {
                      return false
                  }
          })
        this.$nextTick(() => {
          this.$refs['modulePostForm'].clearValidate()
        })
      },
      // 重置表单
      resetFormData () {
        this.DataCache = {
          moduleCode: this.Data.moduleCode,
          moduleName: this.Data.moduleName,
          moduleDesc: this.Data.moduleDesc,
          gwEnvId: this.Data.gwEnvId,
          moduleVersion: this.Data.moduleVersion,
          serverAddress: this.Data.serverAddress,
          serverType: this.Data.serverType
        }
        this.$nextTick(() => {
          this.$refs.modulePostForm.clearValidate()
        })
      }
    },
    mounted () {
      /* ajax.post(api.VIEWAPIMODULE, {moduleId: this.Data.moduleId}, true).then(res => {
        for (let i in res) {
          this.Data[i] = res[i]
        }
      }) */
    },
    activated () {
      this.DataCache = {
        moduleCode: this.Data.moduleCode,
        moduleName: this.Data.moduleName,
        moduleDesc: this.Data.moduleDesc,
        gwEnvId: this.Data.gwEnvId,
        moduleVersion: this.Data.moduleVersion,
        serverAddress: this.Data.serverAddress,
        serverType: this.Data.serverType
      }
      this.$nextTick(() => {
        this.$refs['modulePostForm'].clearValidate()
      })
      // this.currentFormData = JSON.parse(JSON.stringify(this.DataCache))
    },
    deactivated () {
        this.$refs['modulePostForm'].resetFields()
        // var that = this
      // Object.keys(this.Data).forEach(function (key) {
      //   that.DataCache[key] = that.Data[key]
      // })
      Object.keys(this.Data).forEach(key => {
        this.DataCache[key] = this.Data[key]
      })
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #modify-module
    .bg-color-w
      background-color white
    .mar-t-10
      margin-top 10px
    .pd-w30
      padding 7px 30px
    .form-title
      padding 10px
    .el-select
      display block
      margin 0
    .dialogbtn
      text-align center
      margin 0
      padding-bottom 20px
      .el-form-item__content
        margin 0 !important
</style>
